<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <title></title>
        <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
        <style>
            body, html {
                height: 100%;
            }
            .title span{
                padding-top:20px;
                width:100%;
                text-align: center;
                line-height: 50px;
                font-size: 20px;
                margin: 0 auto;
            }
            .btn {
                width: 50px;
                height: 50px;
            }
            i {
                display: block;
                width: 30px;
                height: 30px;
                background-size: 30px;
                background-repeat: no-repeat no-repeat;
                background-position: center;
            }
            .user {
                background-image: url("../../image/login/username.png");
                background-size: 70%;
            }
            .password {
                background-image: url("../../image/login/password.png");
                background-size: 70%;
            }
            .input-wrap {
                margin: 10px 0;
                display: -webkit-box;
                line-height: 30px;
                border-bottom:1px solid rgba(255,255,255,0.8);
            }
            .form {
                margin: 0 20px 0 20px;
                padding: 0 20px;
                line-height: 30px;
            }
            .input-wrap input {
                display: block;
                -webkit-box-flex: 1;
                outline: none;
                border:none;
                height: 30px;
                font-size:1.4em;
                color:#fff;
                font-family:"Arial";
                -web-kit-appearance:none;
                padding:0 1em;
                text-decoration:none;
                background-color: transparent;
                margin-top:24px;
            }
            .button.green {
                background-color: #269b82;
            }
            .button.green:active{
                background-color: #009688;
            }
            .button {
                display: block;
                color: white;
                margin: 10px 40px;
                text-align: center;
                border-radius: 8px;
                height: 40px;
                line-height: 40px;
            }
            .content{
                position:absolute;
                width:100%;
                top:10%;
            }
            input[type="password"],input[type="text"],input[type="number"]{
                margin-bottom:0;
            }
            .red{
                border:1px solid red !important;
            }
            .hidden{
                display:none;
            }
            ::-webkit-input-placeholder {
				font-size:14px;
			} 
			.aui-btn{
				margin-top:15px;
			    background-color: #38a0df;
			    border: 1px solid #38a0df;
			    color:#FFFFFF;
			    font-family: "黑体";
			}
			.aui-btn:active{
				background-color: #0068B0;
			}
			input::-webkit-input-placeholder{
			    color: #fff;opacity:1;
			}
        </style>
    </head>
    <body>
        <div class="content">
            <div class="form">
                <div class="input-wrap">
                    <input type="number" placeholder="请输入手机号" maxlength="11" class="txt" id="phone" value="" oninput="check();"/>
                </div>
                <div class="input-wrap" id="verify">
                    <input type="text" placeholder="请输入验证码" maxlength="6" class="txt" id="checknum" value=""/>
                    <span class="aui-input-addon">
                        <div class="aui-btn" id="sendVerify" status="1" tapmode onclick="getVerify()">获取验证码</div>
                    </span>
                </div>
                <div class="input-wrap">
                    <input type="password" placeholder="请输入新密码" maxlength="20" class="txt" id="password" value=""/>
                </div>
                <div class="input-wrap">
                    <input type="password" placeholder="请重新密码" maxlength="20" class="txt" id="repassword" value=""/>
                </div>
            </div>
            <div class="button green" id="login" tapmode="" onclick="register()">
                重置密码
            </div>
        </div>
    </body>
    <script data-main="../../script/main" src="../../script/require.js"></script>
    <script>
        require(["zepto","api","md5","common"],function(){
            $(".txt").on("focus",function(){
                $(this).removeClass("red"); 
            });
        });
        
        var verify_flag = false;//智能验证通过标志
        var times,isinerval;
        apiready = function() {
            smsVerify = api.require('smsVerify');
            smsVerify.register(function(ret, err){
                if(ret.status){
                    console.log("注册成功");
                }else{
                    console.log("注册失败");
                }
            });
        };
        
        function getVerify(){
            if(!checkMobile($("#phone").val())){
                $("#phone").addClass("red");
                api.toast({
                    msg:'手机号码有误'
                });
                return;
            }
            var status = $("#sendVerify").attr('status');
            if(status!=1){
                return;
            }
            $("#sendVerify").removeAttr('onclick');
            api.parseTapmode();
            $("#sendVerify").html('<span id="GetVerify">60</span>S');
            times = 59;
            isinerval = setInterval("CountDown()", 1000);
            smsVerify.sms({
                phone:$("#phone").val(),
                country:"86"
            },function(ret, err){
                if(ret.status){
                    if( ret.smart == true ){    // 安卓版特有功能 智能验证
                        verify_flag = true;
                        $("#verify").addClass("hidden");
                        api.toast({msg: '智能验证成功，无需验证码验证'});
                    }else{
                        api.toast({msg: '短信发送成功'});
                    }
                }else{
                    api.toast({msg: err.msg});
                }
            });
        }
        function CountDown() {
            if (times < 1) {
                $("#sendVerify").attr('onclick','getVerify()');
                $("#sendVerify").attr('status',1);
                api.parseTapmode();
                $("#sendVerify").html('重新获取');
                clearInterval(isinerval);
                return;
            }
            $("#GetVerify").html(times);
            times--;
        }
        function verifyCode(){
            smsVerify.verify({
                phone:$("#phone").val(),
                country:"86",
                code:$("#checknum").val()
            },function(ret, err){
                if(ret.status){
                    sendAjax();
                }else{
                    $("#checknum").addClass("red");
                    api.alert({msg: err.msg});
                }
            });
        }
        
        function register(){
            var retmsg = checkValues();
            if(retmsg){
                api.toast({
                    msg:retmsg
                });
                return;
            }
            if(verify_flag)
                sendAjax();
            else
                verifyCode();
        }
        
        function sendAjax(){
            var s_data = {
                values:{
                    username : $("#phone").val(),
                    password : $zb.getmd5text($("#password").val())
                }
            }
            $zb.requestForData(s_data,'common','forget',function(ret){
                if(ret.status=="OK"){
                    api.alert({
                        msg:'重置密码成功'
                    });
                    api.closeWin();
                }else{
                    api.toast({
                        msg:ret.status
                    });
                }
            })
        }
        
        function check(){
            if(verify_flag)
                $("#verify").removeClass("hidden");
        }
        
        function checkMobile(str) {
            var re = /^1\d{10}$/;
            if (re.test(str)) {
                return true;
            } else {
                return false;
            }
        }

        
        function checkValues(){
            var ret_message=null;
            if(!$("#phone").val()){
                ret_message = "请输入手机号";
                $("#phone").addClass("red");
                return ret_message;
            }
            if(!$("#password").val()){
                ret_message = "请输入密码";
                $("#password").addClass("red");
                return ret_message;
            }
            if(!$("#repassword").val()){
                ret_message = "请确认密码";
                $("#repassword").addClass("red");
                return ret_message;
            }
            if($("#password").val()!=$("#repassword").val()){
                ret_message = "两次密码输入不一致";
                $("#repassword").addClass("red");
                return ret_message;
            }
        }
    </script>
</html>